<template>
	<div class="add">
		<el-form :model="article" :rules="rules" ref="ruleForm" label-width="80px">

			<el-row :gutter="12">
				<el-col :span="12">
					<el-card shadow="never">
						<el-form-item label="文章标题" prop="title">
							<el-input v-model="article.title"></el-input>
						</el-form-item>
						<el-form-item label="文章描述" prop="description">
							<el-input type="textarea" v-model="article.description"></el-input>
						</el-form-item>
						<el-row :gutter="12">
							<el-col :span="8">
								<el-form-item label="作者">
									<el-input v-model="article.author"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="16">
								<el-form-item label="标签">
									<el-select style="width: 100%;" v-model="article.tags" multiple filterable allow-create default-first-option
									 placeholder="请选择文章标签">
										<el-option v-for="item in allTags" :key="item.id" :label="item.name" :value="item.id">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>


					</el-card>
				</el-col>
				<el-col :span="12">
					<el-card shadow="never">
						<el-form-item label="文章类型">
							<el-radio-group v-model="article.type">
								<el-radio :label="1">技术文章</el-radio>
								<el-radio :label="2">散文小说</el-radio>
								<el-radio :label="3">诗词歌赋</el-radio>
							</el-radio-group>
						</el-form-item>
						<!-- <el-form-item label="封面类型">
							<el-radio-group v-model="article.coverType">
								<el-radio label="普通"></el-radio>
								<el-radio label="大图片"></el-radio>
								<el-radio label="无图片"></el-radio>
							</el-radio-group>
						</el-form-item> -->
						<el-form-item label="封面">
							<el-upload class="upload-demo" :action="uploadImgUrl" multiple :limit="1" accept="jpg,png,jpeg" :on-success="handleSuccess">
								<el-button size="small" type="primary">点击上传</el-button>
							</el-upload>
						</el-form-item>
						<el-row :gutter="12">
							<el-col :span="6">
								<el-form-item label="是否推荐">
									<el-switch v-model="article.recommend" :active-value="1" :inactive-value="0"></el-switch>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="是否置顶">
									<el-switch v-model="article.top" :active-value="1" :inactive-value="0"></el-switch>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="直接发布">
									<el-switch v-model="article.publish" :active-value="1" :inactive-value="0"></el-switch>
								</el-form-item>
							</el-col>
						</el-row>
					</el-card>
				</el-col>
			</el-row>
			<el-row :gutter="12">
				<el-col :span="24">
					<div class="editor">
						<editor v-model="article.contentFormat"></editor>
					</div>
				</el-col>
			</el-row>

			<el-row :gutter="12">
				<el-col :span="24">
					<el-form-item>
						<div class="btn">
							<el-button type="primary" @click="onSubmit">新增</el-button>
							<el-button>取消</el-button>
						</div>
					</el-form-item>
				</el-col>
			</el-row>

		</el-form>
	</div>
</template>

<script>
	import request from '@/utils/request'
	import editor from '@/components/Editor/index.vue'
	export default {
		components: {
			editor
		},
		data() {
			return {
				uploadImgUrl: process.env.VUE_APP_BASE_API + "/file/upload",
				rules: {
					title: [{
						required: true,
						message: '请输入标题',
						trigger: 'blur'
					}, ],
					description: [{
						required: true,
						message: '请输入文章描述',
						trigger: 'blur'
					}, ]
				},
				allTags: [],
				article: {
					title: '',
					description: '',
					contentFormat: '',
					author: 'Lang',
					coverType: '',
					cover: '',
					recommend: 0,
					categoryId: '',
					top: 0,
					publish: 1,
					type: 1,
					tags: ''
				}
			}
		},
		created() {
			this.getAllTags();
		},
		methods: {
			getAllTags() {
				request({
					url: '/tag/list',
					method: 'get'
				}).then(res => {
					this.allTags = res.data;
				})
			},
			saveArticle(){
				return request({
					url: '/system/article/save',
					method: 'post',
					data:this.article
				})
			},
			onSubmit() {
				this.$refs['ruleForm'].validate((valid) => {
					if (valid) {
						this.saveArticle().then(res=>{
							if(res.code == 200){
								this.$message.success("发布成功");
								this.article = {
									title: '',
									description: '',
									contentFormat: '',
									author: 'Lang',
									coverType: '',
									cover: '',
									recommend: 0,
									categoryId: '',
									top: 0,
									publish: 1,
									type: 1,
									tags: ''
								}
							}
						})
					} else {
						return false;
					}
				});
				console.log(this.article)
			},
			handleSuccess(res) {
				if (res.code == 200) {
					this.article.cover = res.msg;
					this.$message.success("图片上传成功");
				} else {
					this.$message.error("图片上传失败");
				}
			}
		}
	}
</script>

<style scoped lang="stylus">
	.add 
		padding 30px
		.editor
			padding-top 20px
		.btn
			padding-top 80px
</style>
